<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Triangle Manipulation</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      #triangle1 {
        width: 557px;
        height: 321px;
        background-size: cover;
        position: absolute;
        cursor: pointer;
        border: 1px solid #302525;
        background-image: url("../../public/etb/OEBPS/resources/3.png"); /* 45°、45°、90°三角形图片 */
      }

      #triangle2 {
        width: 350px;
        height: 350px;
        border: 1px solid #302525;

        background-size: cover;
        position: absolute;
        cursor: pointer;
        background-image: url("../../public/etb/OEBPS/resources/2.png"); /* 45°、45°、90°三角形图片 */
      }

      .angle-indicator {
        position: absolute;
        font-size: 14px;
      }
      .angle {
        color: red;
        font-size: 18px;
      }
      .angle1 {
        position: absolute;
        left: 24px;
        top: 5px;
      }
      .angle2 {
        position: absolute;
        right: 36px;
      }
      .angle3 {
        position: absolute;
        left: 0;
        bottom: 20px;
      }
      .angle-1 {
        position: absolute;

        top: 29px;
        right: -2px;
      }
      .angle-2 {
        position: absolute;
        right: 0;
        bottom: 0;
      }
      .angle-3 {
        position: absolute;
        left: 25px;
        bottom: 0;
      }
      select {
        appearance: none;
        width: 30px;
        height: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <div id="triangle1" class="triangle">
      <div class="angle angle1">90°</div>
      <div class="angle angle2">60°</div>
      <div class="angle angle3">30°</div>
    </div>
    <div id="triangle2" class="triangle">
      <div class="angle angle-1">45°</div>
      <div class="angle angle-2">90°</div>
      <div class="angle angle-3">45°</div>
    </div>
    <!-- <div id="angleIndicator" class="angle-indicator"></div> -->
    <button onclick="rotateTriangle('triangle1')">旋转三角形1</button>
    <button onclick="rotateTriangle('triangle2')">旋转三角形2</button>
    <button onclick="test()">检验1111111</button>

    <select name="" id="">
      <option value=""></option>
      <option value="30°">30°</option>
      <option value="45°">45°</option>
      <option value="60°">60°</option>
      <option value="90°">90°</option>
      <option value="180°">180°</option>
    </select>
    <span> + </span>
    <select name="" id="">
      <option value=""></option>
      <option value="30°">30°</option>
      <option value="45°">45°</option>
      <option value="60°">60°</option>
      <option value="90°">90°</option>
      <option value="180°">180°</option>
    </select>
    <span> = </span>
    <input type="text">
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");
      let triangle1 = document.getElementById("triangle1");
      let triangle2 = document.getElementById("triangle2");
      let angleIndicator = document.getElementById("angleIndicator");
      let offsetX1, offsetY1, offsetX2, offsetY2;

      triangle1.addEventListener("mousedown", startDrag);
      triangle2.addEventListener("mousedown", startDrag);

      function startDrag(e) {
        let target = e.target;
        let rect = target.getBoundingClientRect();

        if (target.id === "triangle1") {
          offsetX1 = e.clientX - rect.left;
          offsetY1 = e.clientY - rect.top;
        } else if (target.id === "triangle2") {
          offsetX2 = e.clientX - rect.left;
          offsetY2 = e.clientY - rect.top;
        }

        document.addEventListener("mousemove", dragElement);
        document.addEventListener("mouseup", stopDrag);
      }

      function dragElement(e) {
        e.preventDefault();
        let target = e.target;

        if (target.id === "triangle1") {
          let x = e.clientX - offsetX1;
          let y = e.clientY - offsetY1;
          target.style.left = x + "px";
          target.style.top = y + "px";
        } else if (target.id === "triangle2") {
          let x = e.clientX - offsetX2;
          let y = e.clientY - offsetY2;
          target.style.left = x + "px";
          target.style.top = y + "px";
        }
        updateAngle();
      }

      function stopDrag() {
        document.removeEventListener("mousemove", dragElement);
        document.removeEventListener("mouseup", stopDrag);
      }

      function rotateTriangle(triangleId) {
      
        let triangle = document.getElementById(triangleId);
        let rotation =
          parseInt(
            triangle.style.transform.replace("rotate(", "").replace("deg)", "")
          ) || 0;
        rotation += 15;
        triangle.style.transform = "rotate(" + rotation + "deg)";
        updateAngle();
        console.log(triangle.getBoundingClientRect());
        let { left, top, width, height } = triangle.getBoundingClientRect();
       let a=  rotateRectanglePoints(top, left, width, height, rotation)
       console.log(a);
      }

      function updateAngle() {
        let rect1 = triangle1.getBoundingClientRect();
        let rect2 = triangle2.getBoundingClientRect();
        let x1 = rect1.left;
        let y1 = rect1.top;
        let x2 = rect2.left;
        let y2 = rect2.top;

        let angle1 =
          Math.atan2(rect1.bottom - y1, x1 - rect1.right) * (180 / Math.PI);
        let angle2 =
          Math.atan2(rect2.bottom - y2, x2 - rect2.right) * (180 / Math.PI);

        let totalAngle = Math.abs(angle1) + Math.abs(angle2);

        // angleIndicator.innerText = "夹角：" + totalAngle.toFixed(2) + "°";
        // angleIndicator.style.left = (x1 + x2) / 2 + 'px';
        // angleIndicator.style.top = (y1 + y2) / 2 + 'px';
      }
      function rotateRectanglePoints(top, left, width, height, rotationAngle) {
        // 计算长方形的中心点坐标
        const centerX = left + width / 2;
        const centerY = top + height / 2;

        // 将角度转换为弧度
        const angleInRadians = (rotationAngle * Math.PI) / 180;

        // 计算旋转矩阵
        const cosTheta = Math.cos(angleInRadians);
        const sinTheta = Math.sin(angleInRadians);

        // 计算每个顶点相对于中心点的坐标
        const topLeftX = -width / 2;
        const topLeftY = -height / 2;
        const topRightX = width / 2;
        const topRightY = -height / 2;
        const bottomLeftX = -width / 2;
        const bottomLeftY = height / 2;
        const bottomRightX = width / 2;
        const bottomRightY = height / 2;

        // 应用旋转矩阵到每个顶点
        const rotatedTopLeftX =
          centerX + (topLeftX * cosTheta - topLeftY * sinTheta);
        const rotatedTopLeftY =
          centerY + (topLeftX * sinTheta + topLeftY * cosTheta);
        const rotatedTopRightX =
          centerX + (topRightX * cosTheta - topRightY * sinTheta);
        const rotatedTopRightY =
          centerY + (topRightX * sinTheta + topRightY * cosTheta);
        const rotatedBottomLeftX =
          centerX + (bottomLeftX * cosTheta - bottomLeftY * sinTheta);
        const rotatedBottomLeftY =
          centerY + (bottomLeftX * sinTheta + bottomLeftY * cosTheta);
        const rotatedBottomRightX =
          centerX + (bottomRightX * cosTheta - bottomRightY * sinTheta);
        const rotatedBottomRightY =
          centerY + (bottomRightX * sinTheta + bottomRightY * cosTheta);

        // 返回旋转后的四个顶点坐标
        return [
          [rotatedTopLeftX.toFixed(0), rotatedTopLeftY.toFixed(0)],
          [rotatedTopRightX.toFixed(0), rotatedTopRightY.toFixed(0)],
          [rotatedBottomLeftX.toFixed(0), rotatedBottomLeftY.toFixed(0)],
          [rotatedBottomRightX.toFixed(0),rotatedBottomRightY.toFixed(0)],
        ];
      }

      // 使用示例
     
    
      function test() {
        let rect1 = triangle1.getBoundingClientRect();
        let rect2 = triangle2.getBoundingClientRect();
        console.log(rect1, rect2);
        let r1 = {
          up1: [rect1.left, rect1.top],
          up2: [rect1.left + rect1.width, rect1.top],
          bottom1: [rect1.left, rect1.top + rect1.height],
          bottom2: [rect1.left + rect1.width, rect1.top + rect1.height],
        };
        let r2 = {
          up1: [rect2.left, rect2.top],
          up2: [rect2.left + rect2.width, rect2.top],
          bottom1: [rect2.left, rect2.top + rect2.height],
          bottom2: [rect2.left + rect2.width, rect2.top + rect2.height],
        };
        console.log(areRectanglesAdjacent(rect1, rect2));
        if (true) {
          ctx.beginPath();
          ctx.moveTo(100, 100); //移动到某个点；
          ctx.lineTo(200, 100); //中点坐标；
          ctx.lineWidth = "1"; //线条 宽度
          ctx.strokeStyle = "blue"; //rgba(0,222,255,.5)

          ctx.stroke(); //描边
          //   // 判断哪两条边相邻，并相应地绘制线段
          //   if (rect1.x + rect1.width === rect2.x) {
          //     // 水平相邻，绘制垂直线段
          //     ctx.beginPath();
          //     ctx.moveTo(rect1.x + rect1.width, rect1.y);
          //     ctx.lineTo(rect1.x + rect1.width, rect1.y + rect1.height);
          //     ctx.stroke();
          //   } else if (rect1.y + rect1.height === rect2.y) {
          //     // 垂直相邻，绘制水平线段
          //     ctx.beginPath();
          //     ctx.moveTo(rect1.x, rect1.y + rect1.height);
          //     ctx.lineTo(rect1.x + rect1.width, rect1.y + rect1.height);
          //     ctx.stroke();
          //   }
        }
        console.log(r1, r2);
        // let x1 = rect1.left;
        // let y1 = rect1.top;
        // let x2 = rect2.left;
        // let y2 = rect2.top;
        // let angle1 = Math.atan2(rect1.bottom - y1, x1 - rect1.right) * (180 / Math.PI);
      }
      function areRectanglesAdjacent(rect1, rect2) {
        const tolerance = 5;
        // 检查水平相邻
        if (
          Math.abs(rect1.x - rect2.x) <= tolerance &&
          Math.abs(rect1.y - rect2.y) <= tolerance
        ) {
          return true;
        }

        // 检查垂直相邻
        if (
          Math.abs(rect1.x - rect2.x) <= tolerance &&
          Math.abs(rect1.y - rect2.y) <= tolerance
        ) {
          return true;
        }

        return false;
      }
    </script>
  </body>
</html>
